<script>
import {
    defineComponent,
    ref,
    watch,
    reactive,
    computed,
    nextTick,
    onMounted,
} from "vue";
import { getAddrs } from "~/api";
import { useRouter } from "vue-router";
import { saveAs } from "file-saver";
import { FormatDate } from "@/utils/formatDate";
import * as XLSX from "xlsx";
export default defineComponent({
    setup(props) {
        const formData = reactive({
            pageNum: 0,
            pageSize: 20,
            total: 0,
        });
        const loadingExcel = ref(false);
        const loading = ref(false);
        const list = ref([]);
        const onSubmit = async () => {
            loading.value = true;
            try {
                const res = await getAddrs(formData);
                list.value = res.data.data.AddrList;
                formData.total = res.data.data.Total;
            } catch (error) {}
            loading.value = false;
        };
        const handleSizeChange = (val) => {
            formData.pageSize = val;
            formData.pageNum = 0;
            onSubmit();
        };
        const handleCurrentChange = (val) => {
            formData.pageNum = val - 1;
            onSubmit();
        };
        onMounted(() => {
            onSubmit();
        });

        const exportExcel = async () => {
            loadingExcel.value = true;
            try {
                const res = await getAddrs({
                    pageNum: 0,
                    pageSize: formData.total,
                });
                const tableData = ref([]);
                res.data.data.AddrList.forEach((item) => {
                    tableData.value.push({
                        "#": item.Id,
                        地址: item.Address,
                        数量: item.Amount,
                    });
                });
                const worksheet = XLSX.utils.json_to_sheet(tableData.value);
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
                const excelBuffer = XLSX.write(workbook, {
                    bookType: "xlsx",
                    type: "array",
                });
                const dataBlob = new Blob([excelBuffer], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
                });

                saveAs(
                    dataBlob,
                    "HF持币地址" + FormatDate(new Date(), "yyyy-MM-dd_hh_mm_ss")
                );
            } catch (error) {
                console.log(error);
            }
            loadingExcel.value = false;
        };

        return {
            formData,
            loading,
            list,
            loadingExcel,
            exportExcel,
            onSubmit,
            handleSizeChange,
            handleCurrentChange,
        };
    },
});
</script>
<template>
    <div>
        <el-form ref="form" :model="formData" label-width="80px" :inline="true">
            <el-form-item>
                <el-button type="danger" @click="$refs.transfer.show()">持币地址</el-button>
                <el-button type="warning" @click="exportExcel" :loading="loadingExcel">导出excel</el-button>

            </el-form-item>
        </el-form>
        <el-table ref="multipleTable" :data="list" v-loading="loading">
            <el-table-column prop="Id" width="80" label="#"> </el-table-column>
            <el-table-column prop="Address" label="地址" width="350">
            </el-table-column>
            <el-table-column prop="Amount" label="数量" min-width="110">
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="formData.pageSize" :total="formData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
        <multi-transfer ref="transfer" @onSubmit="onSubmit" />
    </div>
</template> 
<style lang="scss" scoped>
.el-pagination {
    padding: 15px;
    float: right;
}

.total {
    padding: 10px 0;
    font-size: 16px;
}

a {
    color: #1989fa;
}
</style>